<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-1.11.2.min.js"></script>
</head>

    <meta http-equiv="Content-Type" content="text ml; charset=utf-8"/>
    <title>无标题文档</title>
    <style type="text/css">
        #d {
            width: 700px;
            height: 50px;

            background-color: #999;
        }

        #a li {
            float: left;
            line-height: 50px;
            list-style-type: none;
          margin-left: 50px;
        }

        a {
            text-decoration: none;
        }

        #d1 {
            clear: both;
        }

       #b {
            float: left;
            width: 160px;
            /*height: 80px;*/
            background-color: #CCC;
            list-style-type: none;
            margin:0px 0px 0px 315px;
          /*  margin: 0;*/
            padding: 0;
        }

        #b li:hover {
            background-color: #3CF;
        }

        #c {
            display: none;
        }

        .show{
            display: block;
            position: absolute;
            background-color: red;
        }
    </style>


<body>
<div id="d">
    <ul id="a">
        <li><a href="#">课程介绍</a></li>
        <li><a href="#">相关内容</a></li>
        <li id="l1"><a href="#">咨询顾问 </a>
     <!--	<ul id="b">
            <li><a href="#">课程体系</a></li>
            <li><a href="#">相关知识</a></li>
            <li><a href="#">案例教程</a></li>
            <li><a href="#">导航选项</a></li>
           </ul>-->

       </li>
        <li><a href="#">帮助解疑</a></li>
        <li><a href="#">课外拓展</a></li>
    </ul>
</div>
<div id="c">
    <ul id="b">
        <li><a href="#">课程体系</a></li>
        <li><a href="#">相关知识</a></li>
        <li><a href="#">案例教程</a></li>
        <li><a href="#">导航选项</a></li>
    </ul>
</div>
<div id="d1"></div>

</body>
<script>
    $(function() {
        $("#l1").mouseenter(function () {$("#c").show()});
    });


</script>
</html>
